<template>
  <div id="app">
    <!-- <nav></nav> -->
    <!-- <router-view /> -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      bgcArr: ["252, 28, 28", "240, 161, 100", "74, 144, 226"],
      time: null,
    };
  },
  methods: {
    ...mapMutations(["changebgColor"]),
  },
  created() {
    // localStorage.removeItem("wait-pay");
    // localStorage.removeItem("confirm-pay");
    let index = 0;
    this.time = setInterval(() => {
      index = Math.floor(Math.random() * 3);
      this.changebgColor(this.bgcArr[index]);
    }, 5000);
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
};
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  // background-color: rgb(245, 245, 245);
  height: 100vh;
}
</style>
